<template>
  <div class="container-index">
    <div>
      <Header  :style="styleTop"></Header>
      <NavMenu :style="styleNavmnu" class="isfixed" @propsindex="activeMenuList" ></NavMenu>
      <NavMenuList class="NavMenuList" v-if="activeMenu===0"></NavMenuList>
    </div>
  </div>
</template>
<script>
import Header from "./../components/Header.vue";
import NavMenu from "./../components/NavMenu.vue";
import NavMenuList from "./../components/NavMenuList.vue";
export default {
    name: 'index',
    components: {
      Header,
      NavMenu,
      NavMenuList
    },
    data() {
      return {
        TopbackgroundColor:'#4fc08d',
        activeMenu:0,
        styleTop: {
          background: 'green',
          fontSize: '13px',
          position:'fixed',
          top:'0',
          zIndex:'1',
        },
        styleNavmnu:{
          marginTop:'7.9vh'
        },
        
      } 
    },
    created(){
      
    },
    mounted() {
    },
    methods: {
      activeMenuList(index){
       console.log(index)
       this.activeMenu = index
      },
      
    }
}
</script>

<style lang="scss" scoped>

.container-index{
  margin-bottom:10vh;
    .isfixed{
      position:fixed;
      top:0;
      z-index:999;
      background:#fff
    }
    .NavMenuList{
      margin-top:13vh;
    }
}
  
</style>
